<template>
	<div id="canvas_box">
		<canvas id="canvas"></canvas>
	</div>
</template>

<script lang="ts">
import CanvasUtils from "@/utils/CanvasUtils";
import CanvasEvent from "@/utils/CanvasUtils/CanvasEvent";
import { Color } from "@/utils/CanvasUtils/CanvasType";
import GradualNumber from "@/utils/GradualNumber";
import WatchBlock, { BlockStyleParams } from "@/utils/WatchBlock";
import WatchGradualNumber from "@/utils/WatchGradualNumber";
import WatchNumber from "@/utils/WatchNumber";
import WatchValue from "@/utils/WatchValue";
import { Component, Vue, Watch } from "vue-property-decorator";

class WatchBlockColor extends WatchBlock {
	public Color: Color;

	public constructor(name: string, color: Color, params?: BlockStyleParams) {
		super(name, params);
		this.Color = color || "";
	}
}

// http://localhost:8080/#/WatchBlockPage
@Component({
	name: "WatchBlockPage"
})
export default class WatchBlockPage extends Vue {
	private mounted(): void {
		const element = document.querySelector("#canvas") as HTMLCanvasElement;
		const canvas = new CanvasUtils(element);
		const canvasEvent = new CanvasEvent(element);

		canvasEvent.Add("resize", () => {
			canvas.AutoResize();
			draw_all();
		});

		const box = new WatchBlockColor("box", "#fff", {
			Width: canvas.Width,
			Height: canvas.Height,
			Childrens: [
				new WatchBlockColor("content", "#000", {
					Flex: 1,
					Padding: 50,
					Direction: "row",
					Childrens: [
						new WatchBlockColor("splitValueBox", "#333", {
							Width: "100%",
							Height: 70
						}),
						new WatchBlockColor("main", "#4c404c", {
							Flex: 1,
							Direction: "row",
							Childrens: [
								new WatchBlockColor("dataRect", "#00000000", {
									Width: "100%",
									Height: 50,
									Direction: "column",
									Childrens: [
										new WatchBlockColor("nameBox", "#555", {
											Width: 200,
											Height: "100%",
											PaddingRight: 10
										}),
										new WatchBlockColor("iconBox", "#666", {
											Width: 200,
											Height: "100%",
											PaddingRight: 10
										}),
										new WatchBlockColor("rectBox", "#777", {
											Flex: 1
										}),
										new WatchBlockColor("valueBox", "#888", {
											Width: 200,
											Height: "100%",
											PaddingLeft: 10
										})
									]
								}),
								new WatchBlockColor("floatBox", "#00000000", {
									Position: "absolute",
									Right: 0,
									Bottom: 0,
									Direction: "row",
									Align: "center",
									Childrens: [
										new WatchBlockColor("topIcon", "#ccc", {
											Width: 60,
											Height: 60,
											PaddingBottom: 10
										}),
										new WatchBlockColor("dateBox", "#bbb", {
											Width: 120,
											Height: 60
										})
									]
								})
							]
						}),
						new WatchBlockColor("fpsBox", "red", {
							Position: "absolute",
							Left: 0,
							Top: 0,
							Width: 50,
							Height: 20
						})
					]
				})
			]
		});

		box.CalcUi();

		const draw_background = (block: WatchBlockColor) => {
			canvas.FillStyle = block.Color;
			canvas.FillRect({
				Spot: {
					X: block.Content.Left.Value,
					Y: block.Content.Top.Value
				},
				Width: block.Content.Width.Value,
				Height: block.Content.Height.Value
			});
			block.Childrens.forEach(child => {
				draw_background(child as WatchBlockColor);
			});
		};

		const draw_all = () => {
			canvas.FillStyle = "#ffffff";
			canvas.FillRect({
				Spot: {
					X: 0,
					Y: 0
				},
				Width: canvas.Width.Value,
				Height: canvas.Height.Value
			});
			draw_background(box);
		};

		const main = box.QuerySelector("main");
		const dataRect = box.QuerySelector("dataRect");
		dataRect.Style.Height.BindCall(
			() => main.Content.Height.Value / 30,
			main.Content.Height
		);

		main.Content.Height.Add(null, () => {
			console.log(main.Content.Height.Value);
		});

		draw_all();

		const b = new WatchNumber(0);
		b.BindCall(() => {
			return canvas.Width.Value;
		}, canvas.Width);
		b.Add(null, () => {
			console.log(canvas.Width.Value);
		});

		// 调试
		(window as any).box = box;
	}
}
</script>

<style lang="scss" scoped>
#canvas_box {
	position: relative;
	width: 100%;
	height: 100%;
	#canvas {
		position: relative;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
}
</style>
